<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
        1111
        <div class="box2">
            2222
        </div>
    </div>
    <input type="text" id="ipt"/>
    <select id="slt">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <script>
        /*
            操作文本的内容一共有三种方式:
                innerHTML、innerText、value

            innerHTML会获取到目标元素中的文本信息以及后代节点信息
            innerText只会获取到目标元素以及后代元素中的文本信息
            value一般用于表单元素，多用于输入框input

            而且要注意，不仅可以获取，也是可以赋值的，innerHTML会解析html语句，innerText不会
        */ 
       const box = document.querySelector('.box')
       const box2 = document.querySelector('.box2')
       const ipt = document.querySelector('#ipt')
       const slt = document.querySelector('#slt')

       console.log(box.innerHTML);
       console.log(box.innerText);
       console.log(ipt.value=1);

        //这样一操作，你会发现页面加载完后，下拉框自动选择了值为3的那一项    
       slt.value  = "3"
    </script>
</body>
</html>